<template name="downLoding">
	<view>
		<view class="mask" v-if="isShow" @tap.stop>
			<view class="box" v-if="type=='downLoding'">
				
				<text class="tt">{{title}}</text>
				<view class="progressBox">
					
					<view class="progressBg">
						<view class="progress" :style="{'width':prs+'%'}">
						</view>
					</view>
					<text>{{prs}}%</text>
				</view>
			</view>
			<view class="box upBox"  v-if="type=='upLoding'">
				<view class="circle">
					<text class="iconfont icon-loading"></text>
				</view>
				<text class="tt">正在上传中</text>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default{	
		name:'downLoding',		//组件名称
		// 传递参数
		props:{
			
		},
		// 组件参数
		data(){
			return {
				prs:0,
				isShow:false,
				title:'下载进度',
				type:'downLoding'
				
			}
		},
		watch:{
			prs(newVal){
				if(newVal==100){
					this.close()
				}
			}
		},
		// 组件方法
		methods:{
			show(){
				this.isShow=true
			},
			close(){
				this.isShow=false
			}
		},
		created() {
			uni.$on("downing",payload=>{
				this.show();
				this.prs=payload.progress
			}),
			uni.$on("hide",payload=>{
				this.close();
			})
		}
	}
</script>

<style lang="less" scoped>
	.mask{
		position: fixed;
		width: 100%;
		height: 100%;
		background-color: rgba(0,0,0,0.3);
		top: 0;
		left: 0;
		z-index: 999999;
	}
	.box{
		width: 80%;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		// height: 140upx;
		background-color: #FFFFFF;
		box-shadow: 0px 3px 10px 1px rgba(0,0,0,0.3);
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 30upx 40upx;
		.tt{
			font-size: 28upx;
			margin-bottom: 10upx;
		}
		.progressBox{
			display: flex;
			align-items: center;
			text{
				font-size: 24upx;
				flex-shrink: 0;
				margin-left: 10upx;
			}
		}
		.progressBg{
			flex: 1;
			height: 20upx;
			background-color: #CCCCCC;
			border-radius: 10upx;
			overflow: hidden;
			.progress{
				height: 100%;
				background-color: #ffb423;
			}
		}
		.bgnGroup{
			display: flex;
			button{
				border: none;
			}
		}
	}
	.upBox{
		flex-direction: row;
		align-items: center;
		.tt{
			margin-bottom: 0;
			margin-left: 20upx;
		}
		.circle{
			width: 40upx;
			height: 40upx;
			display: flex;
			align-items: center;
			justify-content: center;
			transform: rotate(0deg);
			animation-name:xuanzhuan;
			animation-duration: 2s;
			animation-iteration-count: infinite;
			animation-timing-function: linear;
			animation-delay: 0s;
		}
		.iconfont{
			font-size: 40upx;
			line-height: 40upx;
			// transform: rotate(0deg);
			// font-weight: bold;
			color: #ffb423;
			
		}
		
	}
	
	@keyframes xuanzhuan {
		from{
			transform: rotate(0deg);
		}
		to{
			transform: rotate(360deg);
		}
	}
</style>
